跳到主要内容

Flexbox 项目属性详解

一、项目属性概览​

Flex 项目有五个主要属性：

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex（简写属性）
  6. align-self

二、属性详解​

1. order（排序）​

  • 定义项目的排列顺序，数值越小，排列越靠前
.flex-item {
    order: 0;    /* 默认值 */
    order: 1;    /* 排在默认值之后 */
    order: -1;   /* 排在默认值之前 */
}

2. flex-grow（放大比例）​

  • 定义项目的放大比例，默认为0（不放大）
.flex-item {
    flex-grow: 0;    /* 默认值：不放大 */
    flex-grow: 1;    /* 等比例放大 */
    flex-grow: 2;    /* 以2倍比例放大 */
}

3. flex-shrink（缩小比例）​

  • 定义项目的缩小比例，默认为1（等比缩小）
.flex-item {
    flex-shrink: 1;    /* 默认值：等比缩小 */
    flex-shrink: 0;    /* 不缩小 */
    flex-shrink: 2;    /* 以2倍比例缩小 */
}

4. flex-basis（基准尺寸）​

  • 定义项目在主轴上的基准尺寸
.flex-item {
    flex-basis: auto;   /* 默认值 */
    flex-basis: 0;      /* 完全依赖 flex-grow 分配空间 */
    flex-basis: 200px;  /* 指定具体尺寸 */
}

5. flex（简写属性）​

  • flex-grow、flex-shrink 和 flex-basis 的简写
.flex-item {
    flex: 0 1 auto;    /* 默认值 */
    flex: 1;           /* 等价于 1 1 0% */
    flex: auto;        /* 等价于 1 1 auto */
    flex: none;        /* 等价于 0 0 auto */
}

6. align-self（单独对齐）​

  • 允许单个项目有不同于其他项目的对齐方式
.flex-item {
    align-self: auto;       /* 默认值：继承父元素的 align-items */
    align-self: flex-start; /* 起点对齐 */
    align-self: flex-end;   /* 终点对齐 */
    align-self: center;     /* 居中对齐 */
    align-self: baseline;   /* 基线对齐 */
    align-self: stretch;    /* 拉伸对齐 */
}

三、常见应用场景​

1. 排序和重排​

  • 使用 order 调整项目顺序
  • 响应式布局中改变元素显示顺序

2. 弹性分配空间​

  • 使用 flex-grow 分配剩余空间
  • 使用 flex-shrink 控制缩小行为

3. 精确控制尺寸​

  • 使用 flex-basis 设置基准尺寸
  • 配合 flex-grow 和 flex-shrink 实现复杂布局

4. 个性化对齐​

  • 使用 align-self 实现特殊对齐需求
  • 在整体布局中突出特定元素

示例代码​

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 项目属性示例</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }

        .flex-container {
            display: flex;
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 20px;
            border: 2px solid #333;
            min-height: 150px;
        }

        .flex-item {
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
            text-align: center;
        }

        /* order 示例 */
        .order-1 { order: 1; }
        .order-2 { order: 2; }
        .order-3 { order: 3; }

        /* flex-grow 示例 */
        .grow-1 { flex-grow: 1; }
        .grow-2 { flex-grow: 2; }
        .grow-3 { flex-grow: 3; }

        /* flex-shrink 示例 */
        .shrink-0 { flex-shrink: 0; min-width: 150px; }
        .shrink-1 { flex-shrink: 1; }
        .shrink-2 { flex-shrink: 2; }

        /* flex-basis 示例 */
        .basis-auto { flex-basis: auto; }
        .basis-0 { flex-basis: 0; }
        .basis-200 { flex-basis: 200px; }

        /* align-self 示例 */
        .self-start { align-self: flex-start; }
        .self-center { align-self: center; }
        .self-end { align-self: flex-end; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Flexbox 项目属性示例</h1>

        <h2>order 属性</h2>
        <div class="flex-container">
            <div class="flex-item order-3">3</div>
            <div class="flex-item order-1">1</div>
            <div class="flex-item order-2">2</div>
        </div>

        <h2>flex-grow 属性</h2>
        <div class="flex-container">
            <div class="flex-item grow-1">1</div>
            <div class="flex-item grow-2">2</div>
            <div class="flex-item grow-3">3</div>
        </div>

        <h2>flex-shrink 属性</h2>
        <div class="flex-container">
            <div class="flex-item shrink-0">不缩小</div>
            <div class="flex-item shrink-1">正常缩小</div>
            <div class="flex-item shrink-2">双倍缩小</div>
        </div>

        <h2>flex-basis 属性</h2>
        <div class="flex-container">
            <div class="flex-item basis-auto">auto</div>
            <div class="flex-item basis-0 grow-1">0 + grow</div>
            <div class="flex-item basis-200">200px</div>
        </div>

        <h2>align-self 属性</h2>
        <div class="flex-container" style="height: 200px;">
            <div class="flex-item self-start">起点对齐</div>
            <div class="flex-item self-center">居中对齐</div>
            <div class="flex-item self-end">终点对齐</div>
        </div>
    </div>
</body>
</html>

注意事项​

  1. order 属性可能影响页面的可访问性
  2. 合理使用 flex-grow 和 flex-shrink 控制空间分配
  3. flex-basis 的值会受到 min-width/max-width 的影响
  4. align-self 会覆盖容器的 align-items 属性

实践建议​

  1. 优先使用 flex 简写属性
  2. 注意 flex-basis 和 width 的关系
  3. 合理使用 order 进行布局调整
  4. 灵活运用 align-self 处理特殊对齐需求